<template>
  <div style="width:100%">
    <div id="monthChart" ref="lineChart1" style="width:100%;height:23vh;" />
  </div>
</template>

<script>
import { bnrQuery } from '../../api/dataApi'

export default {
  data() {
    return {
      personD: [],
      psname: '',
      colorList: ['#eee15f', '#0ce889', '#01c0ff', '#09f2ed'],
      data: [],
    }
  },

  watch: {
    data: {
      handler() {
        this.initChart()
      },

      deep: true,
    },
  },
  mounted() {
    this.getData()
    //需要执行的代码
  },
  props: {
    cx: {
      type: String,
      default: '',
    },
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_manage_prod_chart_devicestatus'
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      bnrQuery(params)
        .then((res) => {
          const data = res.data ? res.data : []
          this.data = data.map((item) => {
            return {
              name: item.title,
              value: item.num,
            }
          })
          this.initChart()
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
    },

    initChart() {
      const myChart = this.$echarts.init(this.$refs.lineChart1)
      const option = {
        title: {
          text: '设备运行状态',
          top: 5,
          left: 10,
          textStyle: {
            fontSize: this.fitChartSize(20),
            color: '#fff',
            fontWeight: 'normal',
          },
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            center: ['52%', '65%'],
            radius: '55%',
            data: this.data.map((item, index) => {
              item.label = {
                color: this.colorList[index],
              }
              return item
            }),
            label: {
              // position: 'inside',
              formatter: function(data) {
                return `${data.name} \n${data.percent.toFixed(1)}%`
              },
              fontSize: this.fitChartSize(18),
              color: '#fff',
            },

            itemStyle: {
              color: (params) => {
                var index = params.dataIndex
                return this.colorList[index]
              },
            },
            labelLine: {
              show: true, //选中时不显示数据标签引导线
              length: 5,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
            emphasis: {
              show: false,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
